import type { RadioGroupItemProps, RadioGroupItemType } from './types.ts'
import React from 'react'

const map: Record<RadioGroupItemType, [string, string]> = {
  button: ['bg-[#F0F0F0] color-[#666666] px-11px', 'bg-[#F5743F] color-white px-11px'],
  text: ['color-[#727272]', 'color-[#F5743F] relative'],
}

const RadioGroupItem: React.FC<RadioGroupItemProps> = ({
  option,
  checked,
  type = 'button',
  name,
  onChange,
}) => {
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    onChange(event.target.value)
  }
  // 获取特殊的样式
  const className = map[type]?.[checked ? 1 : 0]

  return (
    <label
      key={option.value}
      className={`rounded-100 flex-[0_0_auto] py-5px text-12px transition-all-250 ${className}`}
    >
      {
        type === 'text' && checked && (
          <span
            className="absolute bottom-0 left-0 right-0 h-1px w-100% bg-[#F5743F]"
          />
        )
      }
      <input
        type="radio"
        className="hidden"
        name={name}
        value={option.value}
        checked={checked}
        onChange={handleChange}
      />
      {option.label}
    </label>
  )
}

RadioGroupItem.displayName = 'RadioGroupItem'
export default RadioGroupItem
